<template xmlns="http://www.w3.org/1999/html">
  <div style="margin-left: 20px;margin-top: 20px">
    <div class="container">
      <el-input v-model="input" class="input-field" style="width: 300px" placeholder="请输入食物名称" />

      <el-button class="input-field" type="primary" icon="el-icon-search" @click="ck">查询</el-button>
      <el-button type="warning" icon="el-icon-circle-plus" @click="showFormxz">新增</el-button>

    </div>
    <br>
    <el-table v-loading="loading" :data="displayedData" style="">
      <el-table-column v-if="showColumnid" prop="diseaseid" label="编号" />
      <el-table-column prop="codes" label="编码" />
      <el-table-column prop="diseasename" label="疾病名称" />
      <el-table-column v-if="showColumnid" prop="occupationaldisease" label="职业病" />
      <el-table-column v-if="showColumnid" prop="sex" label="适用性别" />
      <el-table-column prop="visitingdepartment" label="就诊科室" />
      <el-table-column prop="warninglevel" label="预警等级" />
      <el-table-column prop="medicaltreatmentperiod" label="就医期限" />
      <el-table-column v-if="showColumnid" prop="othername" label="其他名称" />
      <el-table-column v-if="showColumnid" prop="medicalInterpretation" label="医学解释" />
      <el-table-column v-if="showColumnid" prop="commoncauses" label="常见原因" />
      <el-table-column v-if="showColumnid" prop="recommendation" label="建议" />

      <el-table-column prop="recommendation" label="操作">
        <!-- 使用v-for循环渲染按钮 -->
        <template v-slot="scope">
          <el-button type="primary" icon="el-icon-edit" @click="showEditForm(scope.row.diseaseid)">编辑</el-button>
          <el-button type="danger" icon="el-icon-delete" @click="open(scope.row.diseaseid)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <br>

    <el-pagination
      style="float: right"
      :current-page="currentPage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalItems"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <el-dialog title="新增" :visible.sync="showForm">
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="10">
            <el-form-item label="疾病名称" prop="diseasename">
              <el-input v-model="ruleForm.diseasename" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="10">
            <el-form-item label="是否职业病" prop="occupationaldisease">
              <el-select v-model="ruleForm.occupationaldisease" placeholder="请选择">
                <el-option label="是" value="是" />
                <el-option label="否" value="否" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="适用性别" prop="sex">
              <el-select v-model="ruleForm.sex" placeholder="请选择">
                <el-option label="男" value="男" />
                <el-option label="女" value="女" />
                <el-option label="不限" value="不限" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="10">
            <el-form-item label="就医期限" prop="medicaltreatmentperiod">
              <el-select v-model="ruleForm.medicaltreatmentperiod" placeholder="请选择">
                <el-option label="立即" value="立即" />
                <el-option label="一年内" value="一年内" />
                <el-option label="半年内" value="半年内" />
                <el-option label="三个月内" value="三个月内" />
                <el-option label="一个月内" value="一个月内" />
                <el-option label="一周内" value="一周内" />

              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="就诊科室" prop="visitingdepartment">
              <el-select v-model="ruleForm.visitingdepartment" placeholder="请选择">
                <el-option label="内科" value="内科" />
                <el-option label="外科" value="外科" />
                <el-option label="妇产科" value="妇产科" />
                <el-option label="儿科" value="儿科" />
                <el-option label="心血管内科" value="心血管内科" />
                <el-option label="消化科" value="消化科" />
                <el-option label="肾内科" value="肾内科" />
                <el-option label="血液内科" value="血液内科" />
                <el-option label="呼吸内科" value="呼吸内科" />
                <el-option label="内分泌科" value="内分泌科" />
                <el-option label="风湿免疫科" value="风湿免疫科" />
                <el-option label="感染科" value="感染科" />
                <el-option label="神经内科" value="神经内科" />
                <el-option label="肿瘤内科" value="肿瘤内科" />
                <el-option label="普外科" value="普外科" />
                <el-option label="泌尿外科" value="泌尿外科" />
                <el-option label="甲乳外科" value="甲乳外科" />
                <el-option label="肛肠外科" value="肛肠外科" />
                <el-option label="神经外科" value="神经外科" />
                <el-option label="心胸外科" value="心胸外科" />
                <el-option label="血管外科" value="血管外科" />
                <el-option label="肝胆外科" value="肝胆外科" />
                <el-option label="理疗科" value="理疗科" />
                <el-option label="骨科" value="骨科" />
                <el-option label="烧伤整形科" value="烧伤整形科" />
                <el-option label="耳鼻喉科" value="耳鼻喉科" />
                <el-option label="眼科" value="眼科" />
                <el-option label="口腔科" value="口腔科" />
                <el-option label="精神科" value="精神科" />
                <el-option label="皮肤科" value="皮肤科" />
                <el-option label="中医科" value="中医科" />
                <el-option label="其他" value="其他" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="10">
            <el-form-item label="预警等级" prop="warninglevel">
              <el-select v-model="ruleForm.warninglevel" placeholder="请选择">
                <el-option label="零级" value="零级" />
                <el-option label="一级" value="一级" />
                <el-option label="二级" value="二级" />
                <el-option label="三级" value="三级" />
                <el-option label="四级" value="四级" />
                <el-option label="五级" value="五级" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="15">
            <el-form-item label="其他名称" prop="othername">
              <el-input v-model="ruleForm.othername" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="15">
            <el-form-item label="医学解释" prop="medicalInterpretation">
              <el-input v-model="ruleForm.medicalInterpretation" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="15">
            <el-form-item label="常见原因" prop="commoncauses">
              <el-input v-model="ruleForm.commoncauses" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="15">
            <el-form-item label="建议" prop="recommendation">
              <el-input v-model="ruleForm.recommendation" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
          <el-button @click="resetForm('ruleForm')">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="编辑" :visible.sync="showFormxg">
      <el-form ref="rulexgForm" :model="rulexgForm" :rules="rules2" label-width="100px">
        <el-row>
          <el-col :span="10">
            <el-form-item label="疾病名称" prop="diseasename">
              <el-input v-model="rulexgForm.diseasename" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="10">
            <el-form-item label="是否职业病" prop="occupationaldisease">
              <el-select v-model="rulexgForm.occupationaldisease" placeholder="请选择">
                <el-option label="是" value="是" />
                <el-option label="否" value="否" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="适用性别" prop="sex">
              <el-select v-model="rulexgForm.sex" placeholder="请选择">
                <el-option label="男" value="男" />
                <el-option label="女" value="女" />
                <el-option label="不限" value="不限" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="10">
            <el-form-item label="就医期限" prop="medicaltreatmentperiod">
              <el-select v-model="rulexgForm.medicaltreatmentperiod" placeholder="请选择">
                <el-option label="立即" value="立即" />
                <el-option label="一年内" value="一年内" />
                <el-option label="半年内" value="半年内" />
                <el-option label="三个月内" value="三个月内" />
                <el-option label="一个月内" value="一个月内" />
                <el-option label="一周内" value="一周内" />

              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="就诊科室" prop="visitingdepartment">
              <el-select v-model="rulexgForm.visitingdepartment" placeholder="请选择">
                <el-option label="内科" value="内科" />
                <el-option label="外科" value="外科" />
                <el-option label="妇产科" value="妇产科" />
                <el-option label="儿科" value="儿科" />
                <el-option label="心血管内科" value="心血管内科" />
                <el-option label="消化科" value="消化科" />
                <el-option label="肾内科" value="肾内科" />
                <el-option label="血液内科" value="血液内科" />
                <el-option label="呼吸内科" value="呼吸内科" />
                <el-option label="内分泌科" value="内分泌科" />
                <el-option label="风湿免疫科" value="风湿免疫科" />
                <el-option label="感染科" value="感染科" />
                <el-option label="神经内科" value="神经内科" />
                <el-option label="肿瘤内科" value="肿瘤内科" />
                <el-option label="普外科" value="普外科" />
                <el-option label="泌尿外科" value="泌尿外科" />
                <el-option label="甲乳外科" value="甲乳外科" />
                <el-option label="肛肠外科" value="肛肠外科" />
                <el-option label="神经外科" value="神经外科" />
                <el-option label="心胸外科" value="心胸外科" />
                <el-option label="血管外科" value="血管外科" />
                <el-option label="肝胆外科" value="肝胆外科" />
                <el-option label="理疗科" value="理疗科" />
                <el-option label="骨科" value="骨科" />
                <el-option label="烧伤整形科" value="烧伤整形科" />
                <el-option label="耳鼻喉科" value="耳鼻喉科" />
                <el-option label="眼科" value="眼科" />
                <el-option label="口腔科" value="口腔科" />
                <el-option label="精神科" value="精神科" />
                <el-option label="皮肤科" value="皮肤科" />
                <el-option label="中医科" value="中医科" />
                <el-option label="其他" value="其他" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="10">
            <el-form-item label="预警等级" prop="warninglevel">
              <el-select v-model="rulexgForm.warninglevel" placeholder="请选择">
                <el-option label="零级" value="零级" />
                <el-option label="一级" value="一级" />
                <el-option label="二级" value="二级" />
                <el-option label="三级" value="三级" />
                <el-option label="四级" value="四级" />
                <el-option label="五级" value="五级" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="15">
            <el-form-item label="其他名称" prop="othername">
              <el-input v-model="rulexgForm.othername" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="15">
            <el-form-item label="医学解释" prop="medicalInterpretation">
              <el-input v-model="rulexgForm.medicalInterpretation" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="15">
            <el-form-item label="常见原因" prop="commoncauses">
              <el-input v-model="rulexgForm.commoncauses" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="15">
            <el-form-item label="建议" prop="recommendation">
              <el-input v-model="rulexgForm.recommendation" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button type="primary" @click="submitFormxg('rulexgForm')">确定</el-button>
          <el-button @click="resetFormxg('rulexgForm')">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>

</template>
<style>

.container {
  display: flex;
  align-items: center;
}

.input-field {
  margin-right: 10px; /* 调整元素之间的间距 */

}

</style>
<script>
import row from 'element-ui/packages/row'
import axios from 'axios'
import getters from '@/store/getters'
export default {
  data() {
    return {
      options: [{
        value: '',
        label: ''
      }, {
        value: '大豆',
        label: '大豆'
      }, {
        value: '水果',
        label: '水果'
      }, {
        value: '蔬菜',
        label: '蔬菜'
      }, {
        value: '坚果',
        label: '坚果'
      }, {
        value: '奶',
        label: '奶'
      }, {
        value: '蛋',
        label: '蛋'
      }, {
        value: '畜肉禽鱼虾蟹贝',
        label: '畜肉禽鱼虾蟹贝'
      }, {
        value: '谷薯及杂豆',
        label: '谷薯及杂豆'
      }],
      selectvalue: '',

      message: '', // 返回结果成功没
      article: '',
      loading: true,
      input: '',
      currentPage: 1, // 当前页码
      pageSize: 5, // 每页显示的条数
      totalItems: 0, // 总条数
      activeName: 'first',
      showFormxg: false, // 控制修改表单的显示
      showForm: false, // 控制添加表单的显示状态，默认隐藏
      showColumnid: false, // 控制id数据的隐藏
      showbz: false, // 控制备注数据隐藏
      displayedData: [], // 分页后的

      rulexgForm: {
        diseaseid: '',
        codes: '',
        diseasename: '', /* 疾病名称 */
        occupationaldisease: '', /* 职业病 */
        sex: '', /* 适用性别 */
        medicaltreatmentperiod: '', /* 就医期限 */
        visitingdepartment: '', /* 就诊科室 */
        warninglevel: '', /* 预警等级 */
        othername: '', /* 其他名称 */
        medicalInterpretation: '', /* 医学解释 */
        commoncauses: '', /* 常见原因 */
        recommendation: '' /* 建议 */
      },
      ruleForm: {
        diseasename: '', /* 疾病名称 */
        occupationaldisease: '', /* 职业病 */
        sex: '', /* 适用性别 */
        medicaltreatmentperiod: '', /* 就医期限 */
        visitingdepartment: '', /* 就诊科室 */
        warninglevel: '', /* 预警等级 */
        othername: '', /* 其他名称 */
        medicalInterpretation: '', /* 医学解释 */
        commoncauses: '', /* 常见原因 */
        recommendation: '' /* 建议 */
      },
      rules: {
        diseasename: [
          { required: true, message: '请输入疾病名称', trigger: 'blur' }
        ],
        occupationaldisease: [
          { required: true, message: '请选择', trigger: 'select' }
        ],
        sex: [
          { required: true, message: '请选择', trigger: 'select' }
        ],
        medicaltreatmentperiod: [
          { required: true, message: '请选择', trigger: 'blur' }
        ],
        visitingdepartment: [
          { required: true, message: '请选择', trigger: 'blur' }
        ],
        warninglevel: [
          { required: true, message: '请选择', trigger: 'blur' }
        ],
        othername: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        medicalInterpretation: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        commoncauses: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        recommendation: [
          { required: true, message: '请输入', trigger: 'blur' }
        ]
      },
      rules2: {
        diseasename: [
          { required: true, message: '请输入疾病名称', trigger: 'blur' }
        ],
        occupationaldisease: [
          { required: true, message: '请选择', trigger: 'select' }
        ],
        sex: [
          { required: true, message: '请选择', trigger: 'select' }
        ],
        medicaltreatmentperiod: [
          { required: true, message: '请选择', trigger: 'blur' }
        ],
        visitingdepartment: [
          { required: true, message: '请选择', trigger: 'blur' }
        ],
        warninglevel: [
          { required: true, message: '请选择', trigger: 'blur' }
        ],
        othername: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        medicalInterpretation: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        commoncauses: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        recommendation: [
          { required: true, message: '请输入', trigger: 'blur' }
        ]
      }

    }
  },
  computed: {
    row() {
      return row
    }
  },
  mounted() {
    // 最初调用loadData()方法以填充表格
    const est = {}
    est.name = this.input
    this.fetchArticle(est)
  },
  methods: {
    open(id) {
      let bianliang
      const permissions = getters.permissions(this.$store.state)
      permissions.forEach(permission => {
        const keyword = permission.keyword
        console.log(keyword)
        if (keyword === 'deletejbk') {
          bianliang = 1
        }
      })
      if (bianliang === 1) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 用户点击 "确定" 按钮时执行删除操作
          this.deleteItem(id) // 传递 id 参数
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      } else {
        alert('抱歉你没有这个权限')
      }
    },
    deleteItem(id) {
      this.deletees(id)
      // 在这里执行删除操作，使用传递的 id 参数
      // 可以调用你的删除方法，传递 id 参数
      // 例如：this.$axios.delete(`/api/items/${id}`)
      // 然后处理成功和失败的情况
      // 成功：显示删除成功的消息
      // 失败：显示删除失败的消息
    },
    // 当每页显示条数发生变化时触发
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      // 根据新的每页显示条数重新加载数据
      this.loadData()
    },

    // 当前页码发生变化时触发
    handleCurrentChange(val) {
      this.currentPage = val
      // 根据新的当前页码重新加载数据
      this.loadData()
    },
    // 根据当前页和每页显示的数量加载数据
    loadData() {
      console.log(this.article)
      const startIndex = (this.currentPage - 1) * this.pageSize// 得到当前页从哪一页显示的
      const endIndex = startIndex + this.pageSize// 得到下一页的页
      this.displayedData = this.article.slice(startIndex, endIndex)// （5，10）显示的是第二页的
      this.loading = false
    },
    // 确定添加
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')

          // 在验证通过后获取表单数据
          const formData = { ...this.ruleForm }
          console.log(formData)

          // 执行其他操作，例如发送表单数据到后端
          this.addes(formData)
          this.$refs[formName].resetFields()
          this.showForm = false
        } else {
          alert('error submit!!')
          return false
        }
      })
    },
    // 确定修改
    submitFormxg(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
          const formData = { ...this.rulexgForm }
          this.updatees(formData)
          this.$refs[formName].resetFields()
          this.showFormxg = false
        } else {
          alert('error submit!!')
          return false
        }
      })
    },
    // 显示添加页面
    showFormxz() {
      let bianliang
      const permissions = getters.permissions(this.$store.state)
      permissions.forEach(permission => {
        const keyword = permission.keyword
        console.log(keyword)
        if (keyword === 'addjbk') {
          bianliang = 1
        }
      })
      if (bianliang === 1) {
        this.showForm = true
      } else {
        alert('抱歉你没有这个权限')
      }
    },
    // 显示修改页面
    showEditForm(id) {
      let bianliang
      const permissions = getters.permissions(this.$store.state)
      permissions.forEach(permission => {
        const keyword = permission.keyword
        console.log(keyword)
        if (keyword === 'updatejbk') {
          bianliang = 1
        }
      })
      if (bianliang === 1) {
        const data = this.displayedData.find((user) => user.diseaseid === id)
        this.showFormxg = true
        // 给修改页面赋值
        this.rulexgForm.diseaseid = data.diseaseid
        this.rulexgForm.codes = data.codes
        this.rulexgForm.diseasename = data.diseasename
        this.rulexgForm.occupationaldisease = data.occupationaldisease
        this.rulexgForm.sex = data.sex
        this.rulexgForm.medicaltreatmentperiod = data.medicaltreatmentperiod
        this.rulexgForm.visitingdepartment = data.visitingdepartment
        this.rulexgForm.warninglevel = data.warninglevel
        this.rulexgForm.othername = data.othername
        this.rulexgForm.medicalInterpretation = data.medicalInterpretation
        this.rulexgForm.commoncauses = data.commoncauses
        this.rulexgForm.recommendation = data.recommendation
      } else {
        alert('抱歉你没有这个权限')
      }
    },
    // 添加页面取消
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.showForm = false
    },
    // 修改页面取消
    resetFormxg(formName) {
      this.$refs[formName].resetFields()
      this.showFormxg = false
    },
    // 查询名称方法
    ck() {
      const est = {}
      est.name = this.input
      this.fetchArticle(est)
    },
    // 查询方法
    async fetchArticle(est) {
      console.log(est)
      try {
        // 发送POST请求并设置Content-Type为application/json
        const response = await axios.post('/api/disease/query', est, {
          headers: {
            'Content-Type': 'application/json'
          }
        })
        // eslint-disable-next-line no-unused-vars
        const { code, flag, message, data } = response.data
        this.article = data
        this.message = message
        this.totalItems = this.article.length
        this.loadData()
      } catch (error) {
        console.error('Failed to fetch article:', error)
      }
    },

    async addes(est) {
      try {
        // 发送POST请求并设置Content-Type为application/json
        const response = await axios.post('/api/disease/add', est, {
          headers: {
            'Content-Type': 'application/json'
          }
        })
        const { code, flag, message, data } = response.data
        this.message = message
        this.totalItems = this.article.length
        const est2 = {}
        this.fetchArticle(est2)
        alert(this.message)
      } catch (error) {
        console.error('Failed to fetch article:', error)
      }
    },

    async updatees(est) {
      try {
        // 发送POST请求并设置Content-Type为application/json
        const response = await axios.post('/api/disease/update', est, {
          headers: {
            'Content-Type': 'application/json'
          }
        })
        const { code, flag, message, data } = response.data
        this.message = message
        this.totalItems = this.article.length
        const est2 = {}
        this.fetchArticle(est2)
        alert(this.message)
      } catch (error) {
        console.error('Failed to fetch article:', error)
      }
    },

    async deletees(id) {
      try {
        // 发送POST请求并设置Content-Type为application/json
        const response = await axios.post(`/api/disease/delete/${id}`, null, {
          headers: {
            'Content-Type': 'application/json'
          }
        })
        const { code, flag, message, data } = response.data
        this.message = message
        console.log(this.article)
        this.totalItems = this.article.length
        const est2 = {}
        this.fetchArticle(est2)
        alert(this.message)
      } catch (error) {
        console.error('Failed to fetch article:', error)
      }
    }
  }

}

</script>
